<template>
  <div class="details-content-first">
    <h4 class="houseName">{{ topModule.houseName }}</h4>
    <div class="tag">
      <template v-for="(item,index) in tags" :key="index">
        <span 
        v-if="item.tagText?.text"
        :style="{color:item.tagText?.color,backgroundColor:item.tagText?.background.color}"
        class="tag"
        >
          {{ item.tagText?.text }}
        </span>
      </template>
    </div>
    <div class="commentBrief">
        <h4> {{ topModule.commentBrief.overall }} {{ topModule.commentBrief.scoreTitle }}</h4>
        <div>{{ topModule.commentBrief.commentBrief }}</div>
    </div>
    <div class="nearByPosition">
      <h4> {{ topModule.nearByPosition.address }}</h4>
    </div>
  </div>
</template>

<script setup>
const props =  defineProps({
  topModule:{
    type:Object,
    default:()=>({})
  }
})
const tags = props.topModule.houseTags 

</script>

<style lang="less" scoped>

  .details-content-first {
    .houseName {
      margin: 15px;
      font-size: 20px;
    }
    .tag {
      margin-left: 5px;
      padding: 3px;
    }
    .commentBrief {
      display: flex;
      justify-content: start;
      align-items: center;
      background-color: #f5f7fa;
      margin: 10px;
      padding: 5px;
      h2 {
        margin-right: 10px;
      }
    }
    .nearByPosition {
      background-color: #f5f7fa;
      margin: 10px;
      padding: 5px;
    }
  }
</style>